<template>
  <div :class="{
    'top-part': true,
    'top-part-dark': isDarkTheme,
    'top-part-light': !isDarkTheme
  }">
    <CustomTitle :title="title1" :pageConfig="pageConfig" />
    <div class="content-box">
      <div class="content-item"
        v-for="(item, index) in dataList"
        :key="index"
      >
        <img :src="item.img" alt="">
        <div class="content-item-text">
          <span>{{ item.name }}</span>
          <div><span>{{ item.count }}</span> 单</div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import CustomTitle from '../components/CustomTitle.vue';
export default {
  components: {
    CustomTitle,
  },
  props: {
    pageConfig: Object
  },
  data() {
    return {
      title1: '今日待办（制证环节）',
      dataList: [
        {
          name: '今日到达',
          count: 800,
          img: require('../css/arrive-icon.png')
        },
        {
          name: '当前待办',
          count: 800,
          img: require('../css/todo-icon.png')
        }

      ]
    }
  },
  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    }
  }

}
</script>
<style lang="scss" scoped>
  .top-part {
    height: 100%;
    width: 100%;
    color: #fff;
    .content-box {
      width: 100%;
      height: calc(100% - 35px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .content-item {
        display: flex;
        align-items: center;
        .content-item-text {
          display: flex;
          flex-direction: column;
          span {
            font-size: 16px;
            font-weight: 500;
          }
          div {
            span {
              font-size: 18px; 
               font-family: "TCloudNumber";
              text-shadow: 0 1px 11px #f2691bad;
            }
          }
           
        }
      }
      img {
        width: 30%;
        margin: 0 10px;
      }
    }
  }
  .top-part-dark {
    color: #fff;
  }
  .top-part-light {
    color: #333;
  }

  // 2K
@media screen and (max-width: 2560px) {
  .top-part{
    .content-box {
      height: calc(100% - 55px);
      .content-item {
        .content-item-text {
          span {
            font-size: 20px;
          }
          div {
            span {
              font-size: 36px;
            }
          }
        }
      }
      .img {
        width: 40%;
      }

    }
  }
}
// 全高清屏幕
@media screen and (max-width: 1920px) {
  .top-part {
    .content-box {
      height: calc(100% - 35px);
      .content-item {
        .content-item-text {
          span {
            font-size: 16px;
          }
          div {
            span {
              font-size: 18px;
            }
          }
        }
      }
      .img {
        width: 30%;
      }
    }
  }
}
</style>